<template>
  <el-dialog
    width="60%"
    title="title"
    :lock-scroll="true"
    custom-class="tableDialog"
    :close-on-click-modal="true"
    :modal-append-to-body="false"
    @close="close"
    :visible="dialogTableVisible"
  >
    <!-- slot="title"组件弹窗slot -->
    <comTitle slot="title">
      <template #title>
        <span class="fs-24 mr-16">{{ title }}</span>
      </template>
      <template #subtitle>
        <div class="fs-16 cr-hui3 mr-16">{{ text }}</div>
        <div class="input" v-if="placeholder.length > 0">
          <el-input
            :placeholder="placeholder"
            prefix-icon="el-icon-search"
            v-model="inputValue"
            @input="(event) => $emit('outInputValue', event)"
          >
          </el-input>
        </div>
        <div class="option mr-16" v-if="options.length > 0">
          <selectName
            :selectArr="options"
            :title="true"
            :value="optionValue"
            :keys="keys"
            :label="label"
            :valueKey="valueKey"
            @dropDown="changeValue"
          >
            <div class="fs-16 cr-hui3">{{ optionsTitle }}</div>
          </selectName>
        </div>
        <div class="time" v-if="showTime">
          <Time
            :type="type"
            :value="tableTimeValue"
            @valueChange="(event) => $emit('outValue', event)"
          ></Time>
        </div>
        <div class="more" @click="upload" v-if="uploadTrue">导出</div>
      </template>
      <template #time> </template>
    </comTitle>
    <scroll class="table">
      <slot name="table" />
    </scroll>
    <diaPaging
      @onPage="onPage"
      @onNum="onNum"
      :total="total"
      :size="diaPageSize"
      :num="diaPageNum"
    />
  </el-dialog>
</template>

<script>
import exportInterface from "@/utils/exportInterface";
export default {
  name: "tableDialog",
  props: {
    formData: {
      type: String,
      default: "formData",
    },
    exportInterfaceName: {
      type: String,
      default: "frontpageexport",
    },
    eventName: {
      type: String,
      default: "initeventList",
    },
    tableTimeValue: {
      type: [Array, Date, String],
      default: () => new Date(),
    },
    dialogTableVisible: {
      type: Boolean,
      default: false,
    },
    uploadTrue: {
      type: Boolean,
      default: true,
    },
    type: {
      type: String,
      default: "datetimerange",
    },
    showTime: {
      type: Boolean,
      default: true,
    },
    title: {
      type: String,
      default: "",
    },
    total: {
      type: Number,
      default: 0,
    },
    diaPageNum: {
      type: Number,
      default: 1,
    },
    diaPageSize: {
      type: Number,
      default: 10,
    },
    placeholder: {
      type: String,
      default: "",
    },
    options: {
      type: Array,
      default: () => {
        return new Array();
      },
    },
    optionsTitle: {
      type: String,
      default: "",
    },
    text: {
      type: String,
      default: "",
    },
    keys: {
      type: String,
      default: "",
    },
    label: {
      type: String,
      default: "",
    },
    valueKey: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      exportInterface: exportInterface.exportInterface,
      inputValue: "",
      optionValue: "",
    };
  },
  methods: {
    close() {
      this.$emit("close", false);
      this.inputValue = "";
      this.optionValue = "";
    },
    /* 导出 */
    upload() {
      let params = {
        startTime: this.$getTime(this.tableTimeValue[0]),
        lasttime: this.$getTime(this.tableTimeValue[1]),
      };
      Object.assign(params, this.getInterfaceParams(this.exportInterfaceName));
      this.exportInterface(this.exportInterfaceName, params);
    },
    getInterfaceParams(name) {
      switch (name) {
        case "frontpageexport":
          return {};
        case "equipmentUsageexport":
          return {
            user: this.$parent[this.formData].user,
            equipmentNo: this.$parent[this.formData].equipmentNo,
          };
        case "exportWarehousing":
          return {
            equipmentNo: this.$parent[this.formData].equipmentNo,
            reagentName: this.$parent[this.formData].reagentName,
          };
        case "exportInStock":
          return {
            createBy: this.$parent[this.formData].createBy,
            equipmentNo: this.$parent[this.formData].equipmentNo,
            reagentName: this.$parent[this.formData].reagentName,
          };
        case "requisitionexport":
          return {
            createBy: this.$parent[this.formData].createBy,
            equipmentNo: this.$parent[this.formData].equipmentNo,
            reagentName: this.$parent[this.formData].reagentName,
          };
      }
    },
    onPage(val) {
      this.$parent[this.formData].diaPageSize = val;
      this.$parent[this.eventName]();
    },
    onNum(val) {
      this.$parent[this.formData].diaPageNum = val;
      this.$parent[this.eventName]();
    },
    changeValue(event) {
      this.optionValue = event;
      this.$emit("outOptionValue", event);
    },
  },
};
</script>

<style lang="scss" scoped>
.tableDialog {
  .table {
    height: 90%;
    border: 1px solid #dde4eb;
  }
  /deep/.el-dialog__body {
    height: 77% !important;
  }
  .commonTitle {
    height: 100px !important;
  }
  .bottom-wrap {
    left: 48px !important;
    right: 48px !important;
    position: absolute;
    bottom: 40px;
  }
  .more {
    cursor: pointer;
    margin-left: 24px;
    width: 90px;
    height: 28px;
    border: 1px solid #00bfb1;
    border-radius: 2px;
    text-align: center;
    font-size: 14px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #00bfb1;
    line-height: 28px;
  }
  .input {
    height: 28px;
    line-height: 24px;
    margin-right: 20px;
    /deep/.el-input__inner {
      height: inherit !important;
      line-height: inherit !important;
    }
  }
}
</style>